<script setup lang="ts">
import {onMounted, onUnmounted, ref} from 'vue'
import AMapLoader from "@amap/amap-jsapi-loader";
import company from "@/assets/images/company_default.png"
import company2 from "@/assets/images/car_red.png"
import company3 from "@/assets/images/car_default.png"
import company4 from "@/assets/images/cs_default.png"
import company5 from "@/assets/images/storage_default.png"
import allData from "@/stores/data"

  let map: any = null
  const startDrawing = ref()
const endDrawing = ref()
const startPlaying = ref()
const pausePlayback = ref()
const continuePlaying = ref()
let sudu = ref<number>()
onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: "fe5cebe5de8f748ada96b5eb4a47460a",
  };
  AMapLoader.load({
    key: "2512515557b940cae9fe9c16c8a5f4f5", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale","AMap.MoveAnimation","AMap.MouseTool"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap) => {
      map = new AMap.Map("container", {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center: [114.53915,36.625849], // 初始化地图中心点位置
      });
      // 自定义图标1
      allData.forEach(function (item) {




      const startIcon = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(25, 34),
        // 图标的取图地址
        image: item.id===1?company:item.id===2?company4:item.id===3?company2:item.id===4?company3:company5,

        // 图标所用图片大小
        imageSize: new AMap.Size(30, 50),
        // 图标取图偏移量
        imageOffset: new AMap.Pixel(0, 0)
      });

      // 将 icon 传入 marker
      const startMarker = new AMap.Marker({
        position: new AMap.LngLat(item.lngLat[0], item.lngLat[1]),
        icon: startIcon,
        offset: new AMap.Pixel(-13, -30)
      });


      map.add([startMarker, ]);

      startMarker.on('click', function () {
        infoWindow.open(map, startMarker.getPosition());
      });

      // 实例化信息窗体

      const infoWindow = new AMap.InfoWindow({
        isCustom: true,  //使用自定义窗体
        content: createInfoWindow(),
        offset: new AMap.Pixel(16, -45)
      });

//构建自定义信息窗体
      function createInfoWindow() {
        const info = document.createElement("div");
        info.className = "custom-info input-card content-window-card";
        //可以通过下面的方式修改自定义窗体的宽高
        info.style.width = "400px";
        // 定义顶部标题
        const top = document.createElement("div");
        const titleD = document.createElement("div");
        const closeX = document.createElement("img");
        top.className = "info-top";
        titleD.innerHTML = item.name;
        closeX.src = "https://webapi.amap.com/images/close2.gif";
        closeX.onclick = closeInfoWindow;

        top.appendChild(titleD);
        top.appendChild(closeX);
        info.appendChild(top);

        // 定义中部内容
        const middle = document.createElement("div");
        const p = document.createElement("div");
        const p2= document.createElement("div");
        const p1 = document.createElement("div");
        const p3 = document.createElement("div");
        const s2 = document.createElement("div");
        const s3 = document.createElement("div");
        const t1 = document.createElement("div");
        // 地址
        const o1 = document.createElement("div");
        // PM2.5
        const o2 = document.createElement("div");
        // 所属企业
        const o3 = document.createElement("div");
        // 报警类型
        const o4 = document.createElement("div");
        // 发送时间
        const o5 = document.createElement("div");
        // 所属工地
        const o6 = document.createElement("div");
        // 容量
        const o7 = document.createElement("div");
        // 百分比
        const o8 = document.createElement("div");
        const btn = document.createElement("button");
        btn.className = "btn";
        p1.className = "p1";
        p3.className = "p3"
        s2.className = "s2"
        o5.className = "o5";
        o7.className = "o7";
        o8.className = "o8";
        middle.className = "info-middle";
        middle.style.backgroundColor = 'white';
        middle.appendChild(o1);
        middle.appendChild(o2);
        middle.appendChild(o3);
        middle.appendChild(o4);
        middle.appendChild(o5);
        middle.appendChild(o6);
        middle.appendChild(o7);
        middle.appendChild(o8);
        info.appendChild(middle);
        // 经纬度
        middle.appendChild(p);middle.appendChild(p1);
        // type=0
        middle.appendChild(p2);middle.appendChild(p3);
        // type=2
        middle.appendChild(s2);middle.appendChild(s3);
        // type=3
        middle.appendChild(t1);
        p.innerHTML ='经度' +item.lngLat[0];
        p1.innerHTML='纬度'+ item.lngLat[1];
        if (item.type===0){

          p2.innerHTML ='门禁状态：'+item.access;
          o2.innerHTML ='PM2.5:正常|76.00';
          p3.innerHTML ='工作状态：'+item.status;

          o1.innerHTML ='详细位置：河北省邯郸市丛台区邯郸全有生态建材有限公司'
        }
        if (item.type===1){
          o1.innerHTML ='详细位置：河北省邯郸市丛台区大美如园(建设中)'

        }
        if (item.type===2){
          middle.appendChild(btn)
          btn.innerHTML = '轨迹回放';
          s2.innerHTML ='速度：'+item.speed
          s3.innerHTML ='是否越界:'+item.alarmInformation
          o1.innerHTML = '详细位置：'+item.map
          o3.innerHTML = '所属企业：邯郸全有生态建材有限公司'
          o4.innerHTML = '待处理报警类型：车辆超速'
          o5.innerHTML = '发送时间：2018-12-2814:24'
        }
        if (item.type===3){
          o3.innerHTML = '所属企业：邯郸市叁龙干混砂浆制造有限公司'
          o1.innerHTML = '详细位置：河北省邯郸市万浩丽城'
          t1.innerHTML='重量：'+item.weight
          o4.innerHTML = '报警类型：'
          o5.innerHTML = '发送时间：2018-11-2715:13'
          o6.innerHTML = '所属工地：万浩三期'
          o7.innerHTML = '容量：35000kg'
          o8.innerHTML = '百分比：1.4%'
        }
        // p2.innerHTML ='门禁状态：'+item.access;
        // p3.innerHTML ='工作状态：'+item.status;


        btn.addEventListener('click', ()=>{
          startMarker.moveAlong(lineArr, {
            speed:sudu.value,
            // 每一段的时长
            // duration: 500,//可根据实际采集时间间隔设置
            // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
            autoRotation: true,
          });
        });
        return info;
      }

//关闭信息窗体
      function closeInfoWindow() {
        map.clearInfoWindow();
      }
    //   轨迹回放
        startPlaying.value.addEventListener('click',function(){
          // startMarker.moveAlong(lineArr, {
          //   speed:50,
          //   // 每一段的时长
          //   duration: 500,//可根据实际采集时间间隔设置
          //   // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
          //   autoRotation: true,
          // });
        })
        pausePlayback.value.addEventListener('click',function(){
          startMarker.pauseMove();
        })
        continuePlaying.value.addEventListener('click',function(){
          startMarker.resumeMove();
        })
      // 绘制轨迹
      const  lineArr =item.lineArr;
      const lyline = new AMap.Polyline({
        map: map,
        path: lineArr,
        showDir:true,
        strokeColor: "#28F",  //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6,      //线宽
        // strokeStyle: "solid"  //线样式
      });
        console.log(lyline)

      const passedPolyline = new AMap.Polyline({
        map: map,
        strokeColor: "#AF5",  //线颜色
        strokeWeight: 6,      //线宽
      });
      startMarker.on('moving', function (e: any) {
        passedPolyline.setPath(e.passedPath);
        map.setCenter(e.target.getPosition(),true)
      });

        // map.setFitView();
      // 电子围栏
        startDrawing.value.addEventListener('click', function () {
          const mouseTool = new AMap.MouseTool(map)
          mouseTool.polygon({
            strokeColor: "#FF33FF",
            strokeOpacity: 1,
            strokeWeight: 6,
            // strokeOpacity: 0.2,
            fillColor: '#1791fc',
            fillOpacity: 0.4,
            // 线样式还支持 'dashed'
            strokeStyle: "solid",
            // strokeStyle是dashed时有效
            // strokeDasharray: [30,10],
          })
          mouseTool.on('draw', function(event: any) {
            // event.obj 为绘制出来的覆盖物对象
            console.log(event.obj._opts.path)
            allData.filter(item=>item.type==2).forEach(item=>{
              var inRing = AMap.GeometryUtil.isPointInRing(item.lngLat, event.obj._opts.path);
              console.log(inRing)
            })

          })
          endDrawing.value.addEventListener('click', function (){
            mouseTool.close(false)
          })
        })

      // const mouseTool = new AMap.MouseTool(map)
      // mouseTool.polygon({
      //   strokeColor: "#FF33FF",
      //   strokeOpacity: 1,
      //   strokeWeight: 6,
      //   // strokeOpacity: 0.2,
      //   fillColor: '#1791fc',
      //   fillOpacity: 0.4,
      //   // 线样式还支持 'dashed'
      //   strokeStyle: "solid",
      //   // strokeStyle是dashed时有效
      //   // strokeDasharray: [30,10],
      // })
      // mouseTool.on('draw', function(event: any) {
      //   // event.obj 为绘制出来的覆盖物对象
      //   console.log(event.obj._opts.path)
      //   const inRing =AMap.GeometryUtil.isPointInRing(item.type===2?item.lngLat:false,event.obj._opts.path )
      //     console.log(inRing)
      // })
      })
    })
    .catch((e) => {
      console.log(e);
    });
});

onUnmounted(() => {
  map?.destroy();
});
</script>

<template>
  <div class="button">
    <div class="startDrawing" ref="startDrawing" >开始绘制</div>
    <div class="endDrawing" ref="endDrawing">结束绘制</div>
  </div>
  <div class="trackPlayback">
    <h3>轨迹回放控制</h3>
    <input type="text" v-model="sudu" class="sudu1">
    <div class="startPlaying" ref="startPlaying">开始播放</div>
    <div class="pausePlayback" ref="pausePlayback">暂停播放</div>
    <div class="continuePlaying" ref="continuePlaying">继续播放</div>
  </div>
  <div id="container"></div>
</template>

<style>
#container {
  width: 100%;
  height: 800px;
}

.content-window-card {
  position: relative;
  box-shadow: none;
  bottom: 0;
  left: 0;
  width: auto;
  padding: 0;
}

.content-window-card p {
  height: 2rem;
}

.custom-info {
  border: solid 1px silver;
}

div.info-top {
  position: relative;
  background: none repeat scroll 0 0 #F9F9F9;
  border-bottom: 1px solid #CCC;
  border-radius: 5px 5px 0 0;
}

div.info-top div {
  display: inline-block;
  color: #333333;
  font-size: 14px;
  font-weight: bold;
  line-height: 31px;
  padding: 0 10px;
}

div.info-top img {
  position: absolute;
  top: 10px;
  right: 10px;
  transition-duration: 0.25s;
}

div.info-top img:hover {
  box-shadow: 0px 0px 5px #000;
}

div.info-middle {
  font-size: 12px;
  padding: 10px 6px;
  line-height: 20px;
  position: relative;
}

div.info-bottom {
  height: 0px;
  width: 100%;
  clear: both;
  text-align: center;
}

div.info-bottom img {
  position: relative;
  z-index: 104;
}

span {
  margin-left: 5px;
  font-size: 11px;
}

.info-middle img {
  float: left;
  margin-right: 6px;
}
.btn {
  width: 82px;
  height: 30px;
  line-height: 20px;
  color: aqua;
  border: 1px solid aqua;
  border-radius: 10px;
  background-color: white;
  padding-bottom: 2px;
  position: relative;
  bottom: -3px;
  right: -273px;
}
.p1 {
  position: absolute;
  top: 30px;
  right: 40px;
}
.o5 {
  position: absolute;
  top: 50px;
  right: 40px;
}
.p3 {
  position: absolute;
  top: 50px;
  right: 40px;
}
.s2 {
  position: absolute;
  top: 70px;
  right: 40px;
}
.o7{
  position: absolute;
  top: 70px;
  right: 40px;
}
.o8{
  position: absolute;
  top: 90px;
  right: 40px;
}
.button{
  position: fixed;
  bottom: 12px;
  right:13px;
  z-index: 5000;
}
.startDrawing {
  width: 80px;
  margin: 10px;
  border-radius: 10px;
  border: 1px solid blue;
  color: blue;
  text-align: center;
}
.endDrawing{
  width: 80px;
  margin: 10px;
  border-radius: 10px;
  border: 1px solid blue;
  color: blue;
  text-align: center;
}
.trackPlayback{
  position: fixed;
  bottom: 12px;
  left:13px;
  z-index: 5000;
}
.startPlaying{
  width: 80px;
  margin: 10px;
  border-radius: 10px;
  border: 1px solid blue;
  color: blue;
  text-align: center;
}
.pausePlayback{
  width: 80px;
  margin: 10px;
  border-radius: 10px;
  border: 1px solid blue;
  color: blue;
  text-align: center;
}
.continuePlaying{
  width: 80px;
  margin: 10px;
  border-radius: 10px;
  border: 1px solid blue;
  color: blue;
  text-align: center;
}
.sudu1 {
  width: 80px;
  margin: 10px;
  border-radius: 10px;
  border: 1px solid blue;
  color: blue;
}
</style>
